<template>
  <div class="wrapper" v-if="createNoticeIsShow">
    <el-card class="card">
      <el-card shadow="never">
        <template #header>发布公告的区域与物业电话</template>
        <div class="form-item">
          <el-input
            v-model="title"
            placeholder="请输入标题名称"
            class = 'el-title'
          ></el-input>
          <el-input
            v-model="search"
            size="small"
            style = 'width: 50%'
            placeholder="请输入小区名称"
          ></el-input>
          <el-table :data="filterTableData" border stripe style="width: 100%">
            <!-- <el-table-column type="selection"></el-table-column> -->
            <el-table-column prop="name" label="区域名称" width="180" />
            <el-table-column prop="tel" label="物业电话" width="180" />
          </el-table>
          <el-pagination
            layout="prev, pager, next"
            :page-size="5"
            :total="all"
            @current-change="handleChange"
          ></el-pagination>
        </div>
      </el-card>
      <div class="notice">
        <span>公告信息：</span>
        <el-input
          v-model="textarea"
          style="width: 240px"
          :autosize="{ minRows: 2, maxRows: 4 }"
          type="textarea"
          :placeholder="text"
        />
      </div>
      <template #footer>
        <el-button type="primary" @click = "handleSendNotice">发送</el-button>
        <el-button type="default" @click="handleCloseNotice"
          >取消</el-button
        >
      </template>
    </el-card>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useMapgisStore_hjh } from '@/stores/mapgis-hjh'
const { createNoticeIsShow, title,search,  all, textarea, filterTableData } =
  storeToRefs(useMapgisStore_hjh())
const {handleChange,handleSendNotice,handleCloseNotice} = useMapgisStore_hjh()
// const tableData = [
//   {
//     name: 'Tom',
//     phoneNumber: '15136835924',
//   },
//   {
//     name: 'Jerry',
//     phoneNumber: '15136835924',
//   },
//   {
//     name: 'Lily',
//     phoneNumber: '15136835924',
//   },
//   {
//     name: 'Taaom',
//     phoneNumber: '15136835924',
//   },
//   {
//     name: 'Jerbbry',
//     phoneNumber: '15136835924',
//   },
//   {
//     name: 'Lilccy',
//     phoneNumber: '15136835924',
//   },
// ]

// let page = ref(1) //当前页数从1开始
// const all = tableData.length //小区总数

// const textarea = ref('') //公告内容
const text =
  '您好,xxx道路近期维系,时间为2019年12月1日至2019年12月31日,请计时规划出行路线,避免对您的出行造成影响。'
// const filterTableData = computed(() => {
//   let result = tableData.slice((page.value - 1) * size, page.value * size)
//   return result.filter(
//     (data) =>
//       !search.value ||
//       data.name.toLowerCase().includes(search.value.toLowerCase())
//   )
// })
// const handleChange = (val) => {
//   page.value = val
// }
</script>

<style lang="scss" scoped>
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100;
  .card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .el-title{
       text-align: center;
       margin-bottom: 10px;
    }
    :deep(.el-card__header) {
      height: auto;
      background-color: #f4f4f5;
      padding: 10px 5px;
    }
    .el-pagination {
      justify-content: right;
    }
    .notice {
      display: flex;
      span {
        vertical-align: top;
        display: inline-block;
      }
      .el-textarea {
        display: inline-block;
        flex: 1;
      }
      margin-top: 20px;
    }
    :deep(.el-card__footer) {
      text-align: right;
    }
  }
}
</style>
